<!--  -->
<template>
  <div class="workcalendar">
    <!-- 下拉框 -->
    <div class="yearandmonth">
      <el-select v-model="year" placeholder="请选择" @change="changeday">
        <el-option v-for="item in yearArr" :key="item" :label="item" :value="item"></el-option>
      </el-select>
      <el-select v-model="month" placeholder="请选择" @change="changeday">
        <el-option v-for="item in 12" :key="item" :label="item" :value="item"></el-option>
      </el-select>
    </div>
    <!-- 日历组件 -->
    <el-calendar v-model="value">
      <!-- date为当前点击的日期数据 -->
      <template slot="dateCell" slot-scope="{date}">
        <!-- 自定义处 从date中取出当前是几号 -->
        <div class="mydate"> {{ date.getDate() }} <span class="xiu" :class="{ hidden: isWeek(date) }">休</span></div>
      </template>
    </el-calendar>
  </div>

</template>

<script>
export default {
  // 外界传入的时间
  // 可以用数组{}或者对象[]两种形式
  // 这次采用数组 {}
  props:
  {
    mydate: {
      // 指定传入参数的类型
      type: Date,
      // 如果没有传入的参数，则就用下面函数的返回值作为默认值
      default: function () {
        // 不传内容就用默认值
        return new Date()
      }
    }
  },
  methods: {
    // 判断是否为周末
    isWeek: function (date) {
      // T 不是 F是
      const time = new Date(date)
      // 得到当前星期
      const day = time.getDay()
      // 判断是否是周期
      // 外国人从周日算 0 
      if (day === 0 || day === 6) {
        return false
      }
      return true
    },
    // 修改年月时触发
    changeday () {
      const time = new Date(`${this.year}/${this.month}/1`)
      this.value = time
    }
  },
  // 侦听器
  watch: {
    // 侦听时间变化 提取年和月
    mydate: {
      handler: function () {
        const currentTime = new Date(this.mydate)
        // 提取年
        const _year = currentTime.getFullYear()
        // getMonth从0开始所以要记得 + 1
        const _month = currentTime.getMonth() + 1
        // 保存
        this.year = _year
        this.month = _month
        //  遍历生成年份的数组
        for (var i = _year - 15; i < _year + 35; i++) {
          this.yearArr.push(i)
          console.log(_year)
        }
      },

      // 打开页面立即执行
      immediate: true
    }
  },
  data () {
    return {
      // 年月
      year: '',
      month: '',
      // 日历组件中的默认值
      // 如果不传值，默认是当前时间
      value: '',
      // 年份的集合
      yearArr: []
    }
  },
  //生命周期 - 创建完成（访问当前this实例）
  created () {

  },
  //生命周期 - 挂载完成（访问DOM元素）
  mounted () {

  }
}
</script>
<style  lang="scss">
/* @import url(); 引入css类 */
.workcalendar {
  .yearandmonth {
    text-align: right;
    margin-top: 20px;

    input.el-input__inner {
      width: 100px;
      margin-left: 20px;
    }
  }

  .el-calendar__header {
    display: none;
  }

  .el-calendar-table thead th {
    font-weight: 700;

    &:nth-child(6),
    &:nth-child(7) {
      color: #fa7c4d
    }
  }

  .el-calendar-table__row .prev,
  .el-calendar-table__row .next,
  .el-calendar-table__row .current {
    border: none;
    text-align: center;
    line-height: 46px;
  }

  .el-calendar-day {
    height: 46px;
  }

  .hidden {
    display: none;
  }

  .mydate {
    display: flex;
    align-items: center;

    .xiu {
      width: 20px;
      height: 20px;
      background-color: #fa7c4d;
      border-radius: 50%;
      color: #fff;
      font-size: 12px;
      line-height: 20px;
      margin-left: 10px;
    }
  }


}
</style>